<template>
  <!-- #ifdef MP-WEIXIN -->
  <view class="w-screen" :class="customClass" @tap="$emit('click', $event)">
    <view :style="{ height: sbh + 'px', background }" class="w-screen" />
    <view class="w-screen" :style="{ background, height: mbi.top - sbh + 'px' }" />
    <view class="w-screen flex" :style="{ background, padding: `0 ${px}px`, height: mbi.bottom - mbi.top + 'px' }">
      <view class="flex-grow h-full flex items-center relative"><slot /> </view>
      <view class="h-full" :style="{ width: mbi.width + 'px' }" />
    </view>
    <view class="w-screen" :style="{ background, height: mbi.top - sbh + 'px' }" />
    <slot name="extra" />
  </view>
  <!-- #endif -->
  <!-- #ifndef MP-WEIXIN -->
  <view class="w-screen" :class="customClass" :style="{ background }" @tap="$emit('click', $event)">
    <slot />
  </view>
  <!-- #endif -->
</template>

<script>
export default {
  name: 'Navigation',
  options: { virtualHost: true },
  props: { background: { type: String, default: '#ffffff' } },
  data() {
    const { statusBarHeight, screenWidth } = uni.getSystemInfoSync()
    const mbi = uni.getMenuButtonBoundingClientRect?.() || {}
    return {
      mbi,
      px: screenWidth - mbi.right,
      sbh: statusBarHeight
    }
  }
}
</script>
